<template>
  <div class="container">
    <!-- 头部 -->
    <el-row type="flex" class="row-bg" justify="space-between" align="middle">
      <el-col :span="6"><h1>体检套餐</h1></el-col>
      <el-col :span="6" style="text-align: right;">
        <el-button type="danger">删除</el-button>
        <el-button type="primary" @click="showAddDialog">新增套餐信息</el-button>
      </el-col>
    </el-row>

    <!-- 表格部分 -->
    <el-card class="box-card">
      <!-- 筛选和搜索 -->
      <el-row type="flex" align="middle" :gutter="20" style="margin-bottom: 50px;">
        <el-dropdown>
          <el-button type="primary">
            请选择套餐类型<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>男性套餐</el-dropdown-item>
            <el-dropdown-item>女性套餐</el-dropdown-item>
            <el-dropdown-item>老年人套餐</el-dropdown-item>
            <el-dropdown-item>儿童套餐</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-col :span="6">
          <el-input v-model="searchVal" placeholder="请输入套餐名称" />
        </el-col>
        <el-col :span="18">
          <el-button type="primary" @click="getAdminList">搜索</el-button>
        </el-col>
      </el-row>

      <!-- 数据表格 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="packageId" label="套餐ID" />
        <el-table-column prop="packageName" label="套餐名称" />
        <el-table-column prop="packageType" label="套餐类型"
        :formatter="packageTypeFrom"
        />
        <el-table-column prop="campus" label="适用院区"
        :formatter="campusFrom"
        />
        <el-table-column prop="packagePrice" label="套餐价格(元)" />
        <el-table-column prop="packageProject" label="套餐项目" />
        <el-table-column prop="packageStatus" label="套餐状态" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle style="margin-right: 10px;" @click="showEditDialog(scope.row)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="deletePackage(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-row type="flex" align="middle" style="margin-top: 20px;">
        <el-col :span="24" style="text-align: right;">
          <el-pagination
            :current-page="listQuery.pageNum"
            :page-sizes="[10, 20, 30]"
            :page-size="listQuery.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listQuery.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>
    </el-card>

    <!-- 新增和编辑对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%">
      <el-form :model="form" label-width="100px">
<!--        <el-form-item label="套餐ID">-->
<!--          <el-input v-model="form.packageId" ></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="套餐名称">
          <el-input v-model="form.packageName"></el-input>
        </el-form-item>
        <el-form-item label="套餐类型">
          <el-select v-model="form.packageType" placeholder="请选择套餐类型">
            <el-option label="男性套餐" value="11"></el-option>
            <el-option label="女性套餐" value = "12"></el-option>
            <el-option label="老年人套餐" value = "13"></el-option>
            <el-option label="儿童套餐" value = "14"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="套餐价格">
          <el-input-number v-model="form.packagePrice" :min="0" :step="100"></el-input-number>
        </el-form-item>
        <el-form-item label="适用院区">
          <el-select v-model="form.campus" placeholder="请选择院区">
            <el-option label="北院" value="10"></el-option>
            <el-option label="南院" value="20"></el-option>
            <el-option label="东院" value="30"></el-option>
            <el-option label="西院" value="40"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="套餐项目">
          <el-input type="textarea" v-model="form.packageProject"></el-input>
        </el-form-item>
        <el-form-item label="套餐状态">
          <el-switch v-model="form.packageStatus" active-value="1" inactive-value="0"></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getAll, createPackage, updatePackage, deletePackage } from '@/api/physical_examination/Health_check_up_package'

export default {
  data() {
    return {
      searchVal: '', // 搜索框查询
      tableData: [], // 列表数据
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      dialogVisible: false, // 控制对话框显示隐藏
      dialogTitle: '', // 对话框标题
      form: {
        // packageId: '',
        packageName: '',
        packageType: '',
        packagePrice: 0,
        campus: '',
        packageProject: '',
        packageStatus: '1',
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.getList()
    },
    showAddDialog() {
      this.dialogTitle = '新增套餐信息'
      this.dialogVisible = true
      // this.submitForm()
      // 清空表单数据
      this.form = {

        packageName: '',
        packageType: '',
        packagePrice: 0,
        campus: '',
        packageProject: '',
        packageStatus: '1',
        packageId: ''
      }
    },
    showEditDialog(row) {
      this.dialogTitle = '编辑套餐信息'
      this.dialogVisible = true
      // 填充表单数据
      this.form = {
        packageName: row.packageName,
        packageType: row.packageType,
        packagePrice: row.packagePrice,
        campus: row.campus,
        packageProject: row.packageProject,
        packageStatus: row.packageStatus,
        packageId: row.packageId,
         id: row.id
      }
    },
    submitForm() {
      if (this.form.id) {
        // 编辑
        updatePackage(this.form.id,this.form).then(() => {
          this.$message.success('编辑成功')
          this.dialogVisible = false
          this.getList()
        }).catch(err => {
          this.$message.error('编辑失败')
          console.error(err)
        })
      } else {
        // 新增
        createPackage(this.form).then(() => {
          this.$message.success('新增成功')
          this.dialogVisible = false
          this.getList()
        }).catch(err => {
          this.$message.error('新增失败')
          console.error(err)
        })
      }
    },
    getList() {
      const that = this
      getAll().then(res => {
        const data = res['data']
        that.listQuery.total = data['total']
        that.tableData = data['list']
        console.log(that.tableData)
      })
    },
    deletePackage(row) {
      this.$confirm('此操作将永久删除该套餐信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletePackage(row.id).then(() => {
          this.$message.success('删除成功!')
          this.getList()
        }).catch(err => {
          this.$message.error('删除失败')
          console.error(err)
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    packageTypeFrom(row, column, cellValue, index){
      if (cellValue == 11) {
        cellValue = '男性套餐';
      }else if (cellValue == 12) {
        cellValue = '女性套餐';
      }else if (cellValue == 13) {
        cellValue = '老年人套餐';
      }else if (cellValue == 14) {
        cellValue = '儿童套餐';
      }
      return cellValue;
    },
    campusFrom(row, column, cellValue, index){
      if (cellValue == 10) {
        cellValue = '北院';
      } else if (cellValue == 20) {
        cellValue = '南院';
      } else if (cellValue == 30) {
        cellValue = '东院';
      } else if (cellValue == 40) {
        cellValue = '西院';
      }
      return cellValue;
    }
  }
}
</script>

<style scoped>

</style>
